﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    @*我们新引入js  ui css  js  axios*@

    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/vue.js"></script>
    <link href="~/Content/ElementUI/element-ui.css" rel="stylesheet" />
    <script src="~/Scripts/ElementUI/element-ui.js"></script>
    <script src="~/Scripts/axios.js"></script>
</head>
<body>
    <div id="app">
        @*多条件查询 这里是多条件查询*@
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="视频名称:">
                <el-input v-model="formInline.video_name" placeholder=""></el-input>
            </el-form-item>
            <el-form-item label="视频状态:">
                <el-select v-model="formInline.state" placeholder="---请选择---">
                    <el-option label="上架" value="上架"></el-option>
                    <el-option label="下架" value="下架"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="视频类型:">
                <el-select v-model="formInline.type_id" placeholder="---请选择---">
                    <el-option v-for="item in TypeList" :label="item.type_name" :value="item.type_id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" v-on:click="onSubmit">查询</el-button>
                <el-button type="primary" v-on:click="add">添加</el-button>
            </el-form-item>
        </el-form>
        @*表格数据*@
        <template>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="video_name" label="视频名称" width="180"> </el-table-column>
                <el-table-column prop="type_Name" label="视频类型" width="180" style="height:30px"> </el-table-column>
                <el-table-column prop="play_url" label="播放地址" width="230"> </el-table-column>

                <el-table-column prop="state" label="日期" width="180"> </el-table-column>
                <el-table-column prop="year" width="180" label="年代"> </el-table-column>
                <el-table-column prop="introduce" label="简介"> </el-table-column>
            </el-table>
        </template>
        @*分页*@
        <el-pagination v-on:size-change="handleSizeChange"
                       v-on:current-change="handleCurrentChange"
                       :current-page="page"
                       :page-sizes="[2, 5, 10, 15]"
                       :page-size="limit"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="count">
        </el-pagination>
        @*添加窗口*@
        <el-dialog title="提示"
                   :visible.sync=" adddialogVisible"
                   width="50%">

            <el-form :ref="addform" :model="addform" label-width="100px">
                <el-form-item label="视频名称">
                    <el-input style="width:40%" v-model="addform.video_name"></el-input>
                </el-form-item>
                <el-form-item label="视频类型:">
                    <el-select v-model="addform.type_id" placeholder="---请选择---">
                        <el-option v-for="item in TypeList" :label="item.type_name" :value="item.type_id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="视频状态:">
                    <el-select v-model="addform.state" placeholder="---请选择---">
                        <el-option label="------" value="选折"></el-option>
                        <el-option label="上架" value="上架"></el-option>
                        <el-option label="下架" value="下架"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="播放地址">
                    <el-input style="width:80%" v-model="addform.play_url"></el-input>
                </el-form-item>
                <el-form-item label="视频年代">
                    <el-input style="width:80%" v-model="addform.year"></el-input>
                </el-form-item>
                <el-form-item label="视频简介">
                    <el-input style="width:80%" v-model="addform.introduce"></el-input>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button v-on:click="adddialogVisible = false">取 消</el-button>
                <el-button type="primary" v-on:click="addForm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: "#app",
            data: {
               @* 多条件查询*@
                formInline: {
                    video_name: '',
                    state: '',
                    type_id: ''
                },
             @*   Type表的内容*@
                TypeList: [],
                @*//table表格的数据*@
                tableData: [],
                page: 1,//页数
                limit: 2,//分页
                count: 0,//总数
                addform: {
                    video_name: '',
                    type_id: '',
                    play_url: '',
                    introduce: '',
                    state: '',
                    year: ''
                },
                adddialogVisible: false
            },
            methods: {
                onSubmit: function () {
                    let a = this;
                    axios.post('/Home/PostTable',@*这里地址一定要对哦*@
                        {
                            page: a.page,
                            limit: a.limit,
                            video_name: a.formInline.video_name,
                            state: a.formInline.state,
                            type_id: a.formInline.type_id
                        })
                        .then(function (res) {
                            //console.log(res);
                            a.tableData = res.data.data;
                            a.count = res.data.count;
                        }).catch(function (res) {

                        })
                },
                handleSizeChange: function (val) {
                    this.limit = val;
                    this.onSubmit();
                },
                handleCurrentChange: function (val) {
                    this.page = val;
                    this.onSubmit();
                },
                add: function () {
                    this.adddialogVisible = true;
                },
                addForm: function () {
                    let a = this;
                    axios.post('/home/PostAddForm', a.addform)
                        .then(function (res) {
                            //console.log(res);
                            if (res.data.code) {
                                a.adddialogVisible = false;
                                alert(res.data.msg);
                                a.onSubmit();
                            }
                        }).catch(function (res) {

                        })
                }
            },
            created() {
                let a = this;
                axios.get('/Home/GetTypeId')
                    .then(function (res) {
                        //console.log(res);
                        a.TypeList = res.data;
                        a.onSubmit();
                    }).catch(function (res) {

                    })
            }
        })
    </script>
</body>
</html>